<template>
  <div class="page-content">
    <div class="header">
      <h3>车型分类</h3>
    </div>
    <!-- 表格菜单 -->
    <el-tabs v-model="tableLayout" class="demo-tabs" @tab-change="handleClick" style="margin-top: 20px">
      <el-tab-pane label="驾校管理" name="1"> </el-tab-pane>
      <el-tab-pane label="车型分类" name="2"> </el-tab-pane>
      <el-tab-pane label="报名地点" name="3"> </el-tab-pane>
      <el-tab-pane label="招生员" name="4"> </el-tab-pane>
      <el-tab-pane label="教练管理" name="5"> </el-tab-pane>
      <el-tab-pane label="训练场" name="6"> </el-tab-pane>
    </el-tabs>
    <!-- 表格菜单 -->
    <el-row>
      <div style="width: 12px"></div>
    </el-row>

    <art-table :data="tableData" :loading="tableLoading" :currentPage="pageNum" :pageSize="pageSize" :total="pageTotal"
      @current-change="currentChange" @size-change="sizeChange">
      <template #default>
        <el-table-column label="ID" prop="id" width="55" />
        <el-table-column label="车型名称" prop="typename">
          <template #default="scope" style="width: 500px">
            <div class="bankcont_title">
              <div class="bankcont_title_text">{{ scope.row.carName }}</div>
            </div>
            <div style="clear: both"></div>
            <!-- 车型 -->
            <div class="cartcont" style="margin-top: 0.5rem">
              <el-button round size="small">
                {{ scope.row.carTypes }}
              </el-button>
            </div>
            <!-- end车型 -->
          </template>
        </el-table-column>

        <el-table-column label="图标" prop="url">
          <template #default="scope">
            <img class="tableimg" :src="scope.row.img" v-if="scope.row.img" />
          </template>
        </el-table-column>
        <!-- 开关选项 -->
        <el-table-column #default="scope" label="启用状态">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
            @click="editStatus(scope.row.id, scope.row.status)" />
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150px" align="center">
          <template #default="scope">
            <button-table type="record" @click="examNoticeClick(scope.row)" />
            <button-table type="edit" @click="buttonMoreClick(scope.row)" />
          </template>
        </el-table-column>
      </template>
    </art-table>

    <car-type-dialog v-if="showDialogVisible" :dialog-visible="showDialogVisible" :edit-info="editData"
      @close-dialog="handleCloseDialog"></car-type-dialog>
    <examNotice v-if="examNoticeDialog" :dialog-visible="examNoticeDialog" @close-dialog="noticeCloseDialog"
      :edit-info="editData">
    </examNotice>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { getCarTypeList, editsCarType } from '@/api/driverSchoolApi'
import examNotice from './components/examNotice.vue'

import carTypeDialog from './components/carTypeDialog.vue'

const router = useRouter() // 使用useRouter获取路由实例

const showDialogVisible = ref(false)
const examNoticeDialog = ref(false)
const editData = ref({})
const tableLoading = ref(false)
const tableLayout = ref('2')
const tableData = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)

const buttonMoreClick = (row: any) => {
  showDialogVisible.value = true
  editData.value = JSON.parse(JSON.stringify(row))
}
const examNoticeClick = (row: any) => {
  examNoticeDialog.value = true
  editData.value = JSON.parse(JSON.stringify(row))
}

function handleCloseDialog(value: boolean) {
  if (value) {
    getData()
  }
  showDialogVisible.value = false
}

function noticeCloseDialog(value: boolean) {
  if (value) {
    getData()
  }
  examNoticeDialog.value = false
}

const currentChange = (val: number) => {
  pageNum.value = val
  getData()
}

const sizeChange = (val: number) => {
  pageSize.value = val
  pageNum.value = 1
  getData()
}

async function getData() {
  try {
    tableLoading.value = true

    const { code, data } = await getCarTypeList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      status: 1
    })
    if (code === '00000') {
      tableData.value = data.list
      pageTotal.value = data.total

      console.log(tableData.value, 'tableData.value')
    }
  } catch (e) {
  } finally {
    tableLoading.value = false
  }
}


async function editStatus(id: any, status: number) {
  try {
    const res = await editsCarType({
      carModelId: id,
      customStatus: status
    })
    if (res.code === '0') {
    }
  } catch (e) {

  } finally {
    await getData()
  }
}

const handleClick = (e: any) => {
  console.log(e, "e===");
  if (e === '1') {
    setTimeout(() => {
      router.push('/drivingschool/DrivingschoolManagement')
    }, 0)
  } else if (e === '2') {
    setTimeout(() => {
      router.push('/drivingschool/question_bank_type')
    }, 0)
  } else if (e === '3') {
    setTimeout(() => {
      router.push('/drivingschool/question_bank_type_baoming')
    }, 0)
  } else if (e === '4') {
    setTimeout(() => {
      router.push('/drivingschool/question_bank_type_zhaosheng')
    }, 0)
  } else if (e === '5') {
    setTimeout(() => {
      router.push('/drivingschool/question_bank_type_jiaolian')
    }, 0)
  } else if (e === '6') {
    setTimeout(() => {
      router.push('/drivingschool/question_bank_type_xunlianchang')
    }, 0)
  }
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.page-content {
  .svg-icon {
    width: 1.8em;
    height: 1.8em;
    overflow: hidden;
    vertical-align: -8px;
    fill: currentcolor;
  }
}

.tableimg {
  width: 2rem;
  height: 2rem;
}


.tableimg {
  width: 2rem;
  height: 2rem;
}
</style>
